<template>
  <orh-trees :treesHead="treesHead" reload @on-reload="refresh" :hideTitle="hideTitle">
    <DatePicker
      @on-change="daterangeChange"
      style="width:200px;margin-right: 10px;"
      size="small"
      type="daterange"
      placeholder="请选择时间段"
      slot="option"
    ></DatePicker>
    <Select
      v-model="section"
      style="width:100px;margin-right: 10px;"
      clearable
      slot="option"
      size="small"
    >
      <Option value="5">早读</Option>
      <Option value="1">早自习</Option>
      <Option value="2">第一晚自习</Option>
      <Option value="3">第二晚自习</Option>
      <Option value="4">第三晚自习</Option>
      <Option value="6">资源值班</Option>
    </Select>
    <Button type="primary" @click="handleSubmit" size="small" slot="option">筛选</Button>
    <Tree :data="trees" slot="trees" @on-select-change="itemChange"></Tree>
    <orh-sub-table pages :pageDate="pageDate" @on-page-change="queryData" slot="content">
      <div slot="table">
        <div>
          <echarts :option="option" style="width100%;height:420px;"></echarts>
          <Spin size="large" fix v-if="tableload"></Spin>
        </div>
        <Table :columns="columns" :data="data" :loading="tableload"></Table>
      </div>
    </orh-sub-table>
  </orh-trees>
</template>
                
<script>
const Echarts = () =>
  import("~/components/Public/Echarts").then(m => m.default || m);
export default {
  props: {
    hideTitle: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Echarts
  },
  data() {
    return {
      show: false,
      tableload: false,
      condition: null,
      daterange: null,
      section: null,
      pageDate: {
        total: 0,
        current_page: 1,
        per_page: 0
      },
      treesHead: {
        title: "选择值班项",
        button: false,
        button_text: "添加按钮"
      },
      data: [],
      trees: [],
      columns: [],
      url:
        "api/watchlist/v1/admininspecttermcheck/classbeteachergrade?department_id=",
      gradesUrl: "api/watchlist/v1/get/departmentstest/test",
      option: {
        color: ["#003366", "#006699"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["晚自习值班", "早自习值班"]
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            show: false,
            axisTick: { show: false },
            data: []
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "晚自习值班",
            type: "bar",
            barGap: 0,
            // label: labelOption,
            data: []
          },
          {
            name: "早自习值班",
            type: "bar",
            barGap: 0,
            // label: labelOption,
            data: []
          }
        ]
      }
    };
  },
  methods: {
    daterangeChange(date) {
      this.daterange = date;
    },
    // ==================================================
    // 时间段
    // ==================================================
    handleSubmit() {
      this.tableload = true;
      this.columns = [];
      let urls = "";
      if (this.daterange != null && this.section != null) {
        this.submits(
          this.url +
            this.condition +
            "&an_time=" +
            this.daterange[0] +
            "&en_time=" +
            this.daterange[1] +
            "&section=" +
            this.section
        );
        return;
      }

      if (this.daterange == null && this.section != null) {
        this.submits(this.url + this.condition + "&section=" + this.section);
        return;
      }

      if (this.daterange != null && this.section == null) {
        this.submits(
          this.url +
            this.condition +
            "&an_time=" +
            this.daterange[0] +
            "&en_time=" +
            this.daterange[1]
        );
        return;
      }

      if (this.daterange == null && this.section == null) {
        this.$Message.warning("请选择查询条件");
        return;
      }
    },
    submits(url) {
      this.$http
        .get(url)
        .then(val => {
          this.data = val.data;
          this.columns.push({
            title: "教师名称",
            align: "center",
            width: 150,
            render: (h, params) => {
              return h(
                "span",
                params.row.teacher_name
                  ? params.row.teacher_name.zh
                    ? params.row.teacher_name.zh
                    : params.row.teacher_name.mn
                  : ""
              );
            }
          });
          this.data[0].watchlist.forEach(this.dataHandle);

          let xAxis = [];
          let yAxis1 = [];
          let yAxis2 = [];
          this.data.forEach((item, index) => {
            xAxis.push(item.teacher_name.zh);
            yAxis1.push(item.watchlist[8].cont);
            yAxis2.push(item.watchlist[9].cont);
          });
          this.option.xAxis[0].data = xAxis;
          this.option.series[0].data = yAxis1;
          this.option.series[1].data = yAxis2;

          this.tableload = false;
          this.pageDate.total = val.data.length;
          this.pageDate.per_page = val.data.length;
          this.pageDate.current_page = 1;
          this.columns.push({
            title: " "
          });
        })
        .catch(err => {
          if (err.code && err.code == 422) {
            this.$Message.error(err.message);
          }
          this.tableload = false;
        });
    },

    // ==================================================
    // 获取年级组
    // ==================================================
    gradesData() {
      this.$http
        .get(this.gradesUrl)
        .then(val => {
          this.trees = [];
          let datas = JSON.parse(JSON.stringify(val.data));
          datas.forEach(this.gradesHandle);
        })
        .catch(err => {
          if (err.code && err.code == 422) {
            this.$Message.error(err.message);
          }
        });
    },

    // ==================================================
    // 年级组数据处理
    // ==================================================
    gradesHandle(item, index) {
      if (index == 0) {
        this.trees.push({
          title: item.department_name.zh
            ? item.department_name.zh
            : item.department_name.mn,
          selected: true,
          value: item.id
        });
        this.condition = item.id;
        this.queryData();
      } else {
        this.trees.push({
          title: item.department_name.zh
            ? item.department_name.zh
            : item.department_name.mn,
          value: item.id
        });
      }
    },

    // ==================================================
    // 条件查询数据
    // ==================================================
    itemChange(val) {
      if (val.length != 0) {
        this.data = [];
        this.columns = [];
        this.tableload = true;
        this.condition = val[0].value;
        this.queryData();
      }
    },

    // ==================================================
    // 刷新数据
    // ==================================================
    refresh() {
      this.data = [];
      this.columns = [];
      this.tableload = true;
      this.queryData();
    },

    // ==================================================
    // 查询数据
    // ==================================================
    queryData() {
      this.$http
        .get(this.url + this.condition)
        .then(val => {
          this.data = val.data;
          this.columns.push({
            title: "教师名称",
            align: "center",
            width: 150,
            render: (h, params) => {
              return h(
                "span",
                params.row.teacher_name
                  ? params.row.teacher_name.zh
                    ? params.row.teacher_name.zh
                    : params.row.teacher_name.mn
                  : ""
              );
            }
          });
          this.data[0].watchlist.forEach(this.dataHandle);

          let xAxis = [];
          let yAxis1 = [];
          let yAxis2 = [];
          this.data.forEach((item, index) => {
            xAxis.push(item.teacher_name.zh);
            yAxis1.push(item.watchlist[8].cont);
            yAxis2.push(item.watchlist[9].cont);
          });
          this.option.xAxis[0].data = xAxis;
          this.option.series[0].data = yAxis1;
          this.option.series[1].data = yAxis2;

          this.tableload = false;
          this.pageDate.total = val.data.length;
          this.pageDate.per_page = val.data.length;
          this.pageDate.current_page = 1;
          this.columns.push({
            title: " "
          });
        })
        .catch(err => {
          if (err.code && err.code == 422) {
            this.$Message.error(err.message);
          }
          this.tableload = false;
        });
    },

    // ==================================================
    // 查询数据
    // ==================================================
    dataHandle(item, index) {
      this.columns.push({
        title: item.watchlist_name.zh
          ? item.watchlist_name.zh
          : item.watchlist_name.mn,
        width: 100,
        align: "center",
        render: (h, params) => {
          let state = this.data[params.index].watchlist;
          let name = item.watchlist_name.zh
            ? item.watchlist_name.zh
            : item.watchlist_name.mn;
          let names = state.find(iten => iten.watchlist_name.zh == name);
          return h("div", names.cont);
        }
      });
    }
  },
  mounted() {
    this.gradesData();
  }
};
</script>